.u-validate-field{
    position: relative;
    &:after{
        clear: both;
        display: table;
        content: " ";
    }
    .vali-left{
        float: left;
        display: flex;
        align-items: center;
        .remarks-required{
            color: $color1;
        }
        .remarks-non-required{
            color: #999999;
            font-size: 10px;
            margin-left: 3px;
        }
    }
    .vali-right{
        float: left;
    }
    .vali-error{
        float: left;
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    &.error{
        .vali-error{
            color: $color1;
            transition: height .3s ease-in-out
        }
    }
    &.shake{
        animation-name: shake;
        animation-duration: 1s;
        animation-fill-mode: both;
    }
}
@keyframes shake {
    0%,to {
        transform: translateZ(0)
    }
    10%,30%,50%,70%,90% {
        transform: translate3d(-10px,0,0)
    }
    20%,40%,60%,80% {
        transform: translate3d(10px,0,0)
    }
}